<template>
	<!-- <view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" 
					:latitude="latitude" 
					:longitude="longitude" 
					scale="17"
					:markers="markers" 
					show-location="true" 
					@markertap="markertap">
					<image class="current-site-icon" src="../../../static/image/home/icon_map@2x.png"></image>
				</map>
			</view>
		</view>
	</view> -->
	<view >
		<navbar :navigationBarStyle="navigationBarStyle"></navbar>
		<view class="screen" style="height: 100vh;" :style="'padding-top:' + vuex_phoneLayout.screenPaddingTop + 'px'">
			<view v-show="addListShow">
				<view class="top" style="top:90px">
					<view class="back iconfont icon-fanhui" @tap="back1"></view>
					<view class="search-box" :class="addListShow?'search-box1':''">
						<view class="region" @tap="chooseCityHandle">
							{{currentRegion.district}}
							<!-- <image src="../../images/down.png" class="region-img"></image> -->
						</view>
						<view class="shuxian"></view>
						<input @input="getsuggest" placeholder="请输入您的地址"></input>
					</view>
				</view>
				<!--关键词输入提示列表渲染-->
				<view class="add-list-box">
					<scroll-view class="add-list" scroll-y>
						<view class="add-item" v-for="(item, index) in suggestion" :key="index">
							<!--绑定回填事件-->
							<view @tap="backfill" :data-name="item.title">
								<!--根据需求渲染相应数据-->
								<!--渲染地址title-->
								<view class="title">{{item.title}}</view>
								<!--渲染详细地址-->
								<view class="add">{{item.addr}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			
			<view v-show="!addListShow && !chooseCity">
			<!--地图容器-->
				<view class="top" style="top:90px">
					<!-- <view class="back" @tap="back1">
						<image src="../../images/back.png"></image>
					</view> -->
					<view class="search-box">
						<view class="region" @tap="chooseCityHandle">
							{{currentRegion.district}}
							<view>
								<!-- <image src="../../images/down.png" class="region-img"></image> -->
							</view>
						</view>
						<!-- <view class="shu"></view> -->
						<view class="shuxian"></view>
						<view class="placeholder" @tap="showAddList">请输入您的地址</view>
					</view>
						<view class="button-sub" @tap="selectedOk" hover-class="button-sub_hover">完成</view>
				</view>
				<!-- <map id="myMap"
					 style="width:100%;height:40vh;"
					 :longitude="longitude"
					 :latitude="latitude" :scale="17" @regionchange="mapChange">
					 <image class="current-site-icon" src="../../images/my_marker.png"></image>
					 <view class="reload" @tap="reload">
							<view class="center1">
								<view class="center2"></view>
							</view>
					 </view>
				</map> -->
				<map 
					id="myMap"
					style="width: 100%; height: 300px;"
					:latitude="latitude" 
					:longitude="longitude" 
					scale="17"
					:markers="markers" 
					show-location="true" 
					@markertap="markertap"
					@regionchange="mapChange">
					<image class="current-site-icon" src="../../static/image/home/icon_map@2x.png"></image>
				</map>
				
				<scroll-view class="near-list" scroll-y>
					<!--绑定回填事件-->
					<view class="near-item" v-for="(item, index) in nearList" :key="index">
						<view class="current-site iconfont icon-location" v-if="index == selectedId"></view>
						<!--根据需求渲染相应数据-->
						<view @tap="chooseCenter" :id="index" :data-name="item.title">
							<!--渲染地址title-->
							<view class="title" :class="index == selectedId?'title1':''">{{item.title}}</view>
							<!--渲染详细地址-->
							<view class="add" :class="index == selectedId?'add1':''">{{item.addr}}</view>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="bottom-box">
					<button @tap="selectedOk">确认地址</button>
				</view> -->
			</view>
			<view class="region-box" v-show="chooseCity" style="padding-top:90px">
				<view class="region-top">
					<view class="region-back iconfont icon-fanhui" @tap="back2"></view>
					<view class="title">选择城市</view>
				</view>
				<view class="region-tabs">
					<text class="tab" @tap="showProvince">{{currentProvince}}</text>
					<text class="tab" @tap="showCity" v-if="!regionShow.province">{{currentCity}}</text>
					<text class="tab" @tap="showDistrict" v-if="regionShow.district">{{currentDistrict}}</text>
				</view>
				<scroll-view scroll-y style="height:1050rpx;">
					<view class="region-list" v-if="regionShow.province">
						<view class="region-item" v-for="(item, index) in regionData.province" :key="index">
							<view :data-id="item.id" :data-name="item.fullname" @tap="selectProvince">
								<text>{{item.fullname}}</text>
							</view>
						</view>
					</view>
					<view class="region-list" v-if="regionShow.city">
						<view class="region-item" v-for="(item, index) in regionData.city" :key="index">
							<view :data-id="item.id" :data-name="item.fullname" @tap="selectCity">
								<text>{{item.fullname}}</text>
							</view>
						</view>
					</view>
					<view class="region-list" v-if="regionShow.district">
						<view class="region-item" v-for="(item, index) in regionData.district" v-key="index">
							<view :data-id="item.id" :data-name="item.fullname" :data-latitude="item.location.lat" :data-longitude="item.location.lng" @tap="selectDistrict">
								<text>{{item.fullname}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var amapPlugin
	export default {
		data() {
			return {
				navigationBarStyle: {
					background: '',
					color: 'black',
					iconText: '' //导航栏文字
				},
				poisdatas: [{}, {}, {}],
				title: 'map',
				latitude: 30.208487,
				longitude: 120.21202,
				keywords:'',
				SRC: '111111111111',
				polyline: [{
					points: [{
							latitude: 30.208487,
							longitude: 120.21202
						},
						{
							latitude: 30.209403,
							longitude: 120.213845
						},
					],
					color: "#000000",
					width: 2,
					dottedLine: true,
					arrowLine: true,
				}],
				mapCtx:''	
			}
		},
		onLoad() {
			var self = this;
			var amapFile = require('@/common/gaodemap/amap-wx.130.js');
			this.mapCtx = uni.createMapContext('myMap')
			amapPlugin = new amapFile.AMapWX({
				key: "d79175a7297ea981b65a7bb9dae0fec2"
			});
			amapPlugin.getInputtips({
			      keywords: "吃饭",
			      location: this.longitude + ',' + this.latitude,
			      city: "杭州",
			      success: function (data) {
							console.log('getInputtips')
							console.log(data)
			        if (data && data.tips) {     
			          console.log(data)
			        }
			      }
			    })
			amapPlugin.getRegeo({
				type: 'gcj02',
				success: function(data) {
					console.log('getRegeo')
					console.log(data)
					self.markers = []
					self.markers.push({
						"id": 0,
						"width": 22,
						"height": 32,
						"iconPath": "/static/aidex/images/user01.png",
						"latitude": 30.208487,
						"longitude": 120.21202,
						"title": "1231123"
					})
				},
			})
			amapPlugin.getPoiAround({
				success: function(data) {
					// self.markers = data.markers;
					/*self.markers = [{
						"id": 0,
						"width": 22,
						"height": 32,
						"latitude": 30.208487,
						"longitude": 120.21202,
						"callout": {
							"padding": 2,
							"fontSize": 15,
							"bgColor": "blue",
							"color": "#6B8E23",
							"borderRadius": 5,
							"display": "BYCLICK",
							"content": "��������"
						}
					}, {
						"id": 18,
						"width": 22,
						"height": 32,
						"latitude": 30.209403,
						"longitude": 120.213845,
						"callout": {
							"padding": 2,
							"fontSize": 15,
							"bgColor": "blue",
							"color": "#6B8E23",
							"borderRadius": 5,
							"display": "BYCLICK",
							"content": "�����ºͺ�(����)��ʦ������"
						}
					}];*/
					/* self.poisdatas = data.poisData;
					var markers_new = [];
					self.markers.forEach(function(item, index) {
						markers_new.push({
							id: item.id, //marker ���
							width: item.width, //marker ����
							height: item.height, //marker �߶�
							iconPath: item.iconPath, //marker ͼ��·��
							latitude: item.latitude, //marker  γ��
							longitude: item.longitude, //marker ����

							callout: {
								padding: 2, //callout �ı���Ե����
								fontSize: 15, //callout  ���ִ�С
								bgColor: 'blue', //callout ������ɫ
								color: '#6B8E23', //callout ������ɫ
								borderRadius: 5, //�߿�Բ��
								display: 'BYCLICK', //callout 'BYCLICK':�����ʾ; 'ALWAYS':����
								content: self.poisdatas[index].name //����λ������
							}
						})
					})
					self.markers = markers_new[0];
					console.log("data", JSON.stringify(self.poisdatas));
					console.log("markers", JSON.stringify(self.markers));
					console.log("datadatadata", data); */
				},
				fail: function(info) {
					console.log("info", info)
				}
			})
			/*	amapPlugin.getStaticmap({
					zoom: 8,
					size: 300 * 300,
					scale: 2,
					paths: "10,0x0000ff,1,,:120.210890,30.207171;120.210205,30.207968;120.210320,,30.207599;120.210694,30.207111",
					success: function(data) {
						self.setData({
							src: data.url
						})
					},
					fail: function(info) {
						wx.showModal({
							title: info.errMsg
						})
					}
				})
			*/

		},
		methods: {
			//监听拖动地图，拖动结束根据中心点更新页面
			mapChange: function (e) {
			  let self = this;
			  if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')){
			    self.mapCtx.getCenterLocation({
			      success: function (res) {
			        console.log(res)
			        // self.setData({
			        //   nearList:[],
			        //   latitude: res.latitude,
			        //   longitude: res.longitude,
			        // })
							self.nearList = []
							self.latitude = res.latitude
							self.longitude = res.longitude
			        self.nearby_search();
			      }
			    })
			  }
			},
			// 根据关键词搜索附近位置
			nearby_search: function () {
				console.log(66)
			  var self = this;
			  /* wx.hideLoading();
			  wx.showLoading({
			    title: '加载中'
			  }); */
				amapPlugin.getInputtips({
					keywords: self.keywords,
			    location: self.latitude + ',' + self.longitude,
					city: "杭州",
					success: function (data) {
						console.log('getInputtips')
						console.log(data)
						if (data && data.tips) {     
							console.log(data)
						}
					}
				})
				return
			  // 调用接口
			  qqmapsdk.search({
			    keyword: self.keyword,  //搜索关键词
			    //boundary: 'nearby(' + self.latitude + ', ' + self.longitude + ', 1000, 16)',
			    location: self.latitude + ',' + self.longitude,
			    page_size: 20,
			    page_index: 1,
			    success: function (res) { //搜索成功后的回调
			      //console.log(res.data)
			      var sug = [];
			      for (var i = 0; i < res.data.length; i++) {
			        sug.push({ // 获取返回结果，放到sug数组中
			          title: res.data[i].title,
			          id: res.data[i].id,
			          addr: res.data[i].address,
			          province: res.data[i].ad_info.province,
			          city: res.data[i].ad_info.city,
			          district: res.data[i].ad_info.district,
			          latitude: res.data[i].location.lat,
			          longitude: res.data[i].location.lng
			        });
			      }
			      self.setData({
			        selectedId: 0,
			        centerData: sug[0],
			        nearList: sug, 
			        suggestion: sug
			      })
			      self.addMarker(sug[0]);
			    },
			    fail: function (res) {
			      //console.log(res);
			    },
			    complete: function (res) {
			      //console.log(res);
			    }
			  });
			},
			markertap: function(e) {
				for (var i = 0; i < this.markers.length; i++) {
					if (JSON.stringify(e).substring(18, 20) == this.markers[i].id) {
						console.log("markers" + this.poisdatas[i].name + "   " + this.poisdatas[i].address);
						uni.showToast({
							title: this.poisdatas[i].name,
							mask: false,
							duration: 1500
						});
					}
				}

			}
		}
	}
</script>

<style>
	.current-site-icon {
	  width: 40rpx;
	  height: 50rpx;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%,-50%);
	}
</style>

<style lang="scss">
	
.top {
  width: 100%;
  /* position: fixed; */
  top: 0;
  left: 0;
  padding: 20rpx 20rpx;
  z-index: 999;
  overflow: hidden;
}
.back {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #666;
  text-align: center;
  background: rgb(255,255,255);
  font-size: 50rpx;
  border-radius: 50%;
  float: left;
}
.back cover-image{
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  margin-top: 15rpx;
}
.search-box {
  width: 600rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35rpx;
  background: rgb(255,255,255);
  /* margin-left: 20rpx; */
  float: left;
  overflow: hidden;
  display: flex;
}
.search-box1 {
  border: 1px solid #ccc;
  border-radius: 35rpx;
  background: #eee;
}
.region-img{
  width: 20rpx;
  height: 20rpx;
  position: absolute;
  right: 16rpx;
  top: 28rpx;
}
.search-box .region {
  width: 199rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #282828;
  text-align: center;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #f5f5f5;
  position: relative;
  padding: 0 44rpx 0 20rpx;
  box-sizing: border-box;
}
/* .search-box .region::after {
  content: "∨";
  position: absolute;
  right: 20rpx;
  font-size: 20rpx;
  top: 0;
  width: 10rpx;
  color: #aaa;
  background: transparent;
} */
.search-box .shuxian{
  width: 2rpx;
  height: 70rpx;
  float: left;
  background: #ccc;
}
.search-box input {
  width: 398rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  color: #282828;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  float: left;
}
.search-box .placeholder{
  width: 398rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  color: #ccc;
  padding: 0 20rpx;
  box-sizing: border-box;
  float: left;
  background: #f5f5f5;
}
.top .button-sub{
  width: 100rpx;
  height: 70rpx;
  line-height: 70rpx;
  color: #fe8800;
  font-size: 32rpx;
  text-align: center;
  margin-right: 10rpx;
  border-radius: 10rpx;
  float: left;
}
.top .button-sub_hover{
  background: #ddd;
}
.add-list-box {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 998;
  /* padding-top: 150rpx; */
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.add-list {
  width: 100%;
  height: 1000rpx;
}
.add-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx;
  text-align: left;
  border-top: 1px solid #eee;
}
.add-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-item .add {
  color: #707070;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.current-site-icon {
  width: 40rpx;
  height: 50rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.near-list {
  height: 50vh;
  box-sizing: border-box;
}
.near-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx 30rpx 90rpx;
  text-align: left;
  border-bottom: 1px solid #eee;
  position: relative;
}
.current-site {
  font-size: 40rpx;
  color: #fe8800;
  position: absolute;
  top: 40rpx;
  left: 30rpx;
}
.near-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.near-item .add {
  color: #b3b3b3;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.near-item .title1 {
  color: #fe8800;
}
.near-item .add1 {
  color: #b3b3b3;
}
.bottom-box {
  width: 100%;
  padding: 20rpx;
  background: #fff;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 88;
  overflow: hidden;
}
.bottom-box button{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0;
  border: none;
  background: #3095F9;
  color: #fff;
  font-size: 36rpx;
}

.region-box {
  width: 100%;
  height: 100%;
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
}
.region-box .region-top {
  position: relative;
  font-size: 40rpx;
  color: #282828;
  font-weight: bold;
  line-height: 100rpx;
  text-align: center;
}
.region-box .region-back {
  width: 80rpx;
  height: 80rpx;
  font-size: 50rpx;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
.region-box .region-tabs{
  line-height: 60rpx;
  font-size: 20rpx;
}
.region-tabs .tab {
  position: relative;
  min-width: 100rpx;
  /* max-width: 200rpx; */
  line-height: 50rpx;
  font-size: 24rpx;
  color: #3095F9;
  color: #000;
  text-align: center;
  /* border: 1rpx solid #ddd; */
  border-left:1rpx solid transparent;
  background: #eee;
  border-radius: 6rpx;
  display: inline-block;
  margin: 20rpx 0 20rpx 20rpx;
  /* padding: 3rpx 14rpx 3rpx 20rpx;  */
  padding: 0rpx 20rpx; 
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: ellipsis;
}
/*.region-tabs .tab:nth-of-type(1)::before{
  content: '';
  opacity: 0;
  display: none;
  position: absolute;
  height: 0rpx;
  width: 0rpx;
  border:21rpx solid transparent;
  border-left: 21rpx solid white;
  left:-1rpx;
  top: 1rpx;
}
.region-tabs .tab::before{
  content: '';
  display: block;
  position: absolute;
  height: 0rpx;
  width: 0rpx;
  border:21rpx solid transparent;
  border-left: 21rpx solid white;
  left:-1rpx;
  top: 1rpx;
}
.region-tabs .tab::after{
  content: '';
  display: block;
  position: absolute;
  height: 0rpx;
  width: 0rpx;
  border:21rpx solid transparent;
  border-left: 21rpx solid #ddd;
  right:-40rpx;
  top: 1rpx;
} */
.region-list .region-item{
  font-size: 30rpx;
  color: #282828;
  padding: 10rpx 30rpx;
  border-top: 1rpx solid #eee;
}

.map-prompt {
  width: 420rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #707070;
  text-align: center;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translate(-50%,0);
}
.reload {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 30rpx;
  right: 30rpx;
}
.reload .center1 {
  width: 30rpx;
  height: 30rpx;
  border: 1rpx solid #fe8800;
  border-radius: 50%;
  margin: 24rpx auto;
}
.reload .center2 {
  width: 25rpx;
  height: 25rpx;
  background: #fe8800;
  border-radius: 50%;
  margin: 3rpx auto;
}
</style>
